<template>
    <span>
        <Dropdown @on-click="handleProfileDropdownClick">
            <a href="javascript:void(0)">
                {{ profile.username }}
                <Icon type="ios-arrow-down"></Icon>
            </a>
            <template #list>
                <DropdownMenu>
                    <dropdown-item name="modify_password">修改密码</dropdown-item>
                    <dropdown-item name="logout">退出</dropdown-item>
                </DropdownMenu>
            </template>
        </Dropdown>
        <Modal v-model="modify_password_modal" title="修改密码" :mask-closable="false">
            <i-form :model="profile" :label-width="80">
                <form-item label="旧密码">
                    <i-input v-model="profile.old_password" type="password" password></i-input>
                </form-item>
                <form-item label="新密码">
                    <i-input v-model="profile.new_password" type="password" password></i-input>
                </form-item>
                <form-item label="确认新密码">
                    <i-input v-model="profile.confirm_password" type="password" password></i-input>
                </form-item>
            </i-form>
            <template #footer>
                <i-button type="primary" @click="handleModifyPasswordOk">确定</i-button>
                <i-button type="text" @click="handleModifyPasswordCancel">取消</i-button>
            </template>
        </Modal>
    </span>
</template>

<script>
//import { mapGetters } from 'vuex'

export default {
    name: 'ProfileButton',
    computed: {
        //...mapGetters(['user'])
    },
    data() {
        return {
            modify_password_modal: false,
            profile: {
                username: '',
                old_password: '',
                new_password: '',
                confirm_password: ''
            },
        }
    },
    methods: {
        handleProfileDropdownClick (name) {
            if (name == 'logout') {
                this.$Modal.confirm({
                    title: '提示',
                    content: '确定要退出登录吗？',
                    onOk: () => {
                        this.handleLogout();
                    }
                });
            } else if (name == 'modify_password') {
                this.handleModifyPasswordShow();
            }
        },
        handleModifyPasswordShow() {
            this.profile.old_password = '';
            this.profile.new_password = '';
            this.profile.confirm_password = '';
            this.modify_password_modal = true;
        },
        handleModifyPasswordOk() {
            if (this.profile.new_password != this.profile.confirm_password) {
                this.errorMessage('两次输入的密码不一致');
                return;
            }
            this.$http.post('/modify_password', this.profile).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success('修改密码成功');
                    this.modify_password_modal = false;
                }else {
                    this.errorMessage('修改密码失败');
                }
            });
        },
        handleModifyPasswordCancel() {
            this.modify_password_modal = false;
        },
        handleGetProfile() {
            this.$http.get('/profile').then((res) => {
                this.profile.username = res.data.username;
            })
        },
        handleLogout() {
            this.$http.post('/logout').then((res) => {
                if (res.status == 'ok') {
                    this.$Message.success('登出成功');
                    this.$router.push('/login');
                    localStorage.removeItem('token');
                }
            })
        }
    },
    created() {
        this.handleGetProfile();
    }
}
</script>

<style lang="scss" scoped>

</style>